<template>
    <!-- 餐饮 -->
    <div class="restaurant box">
        <div class="title">
            <div class="left">
                <img src="images/home/restaurant.svg">
                <b>餐饮</b>
            </div>
            <div class="right" @click="handleClickMore()">更多
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="content">
            <ul>
                <li @click="handleClick('/smarcatering/oneWeekMenu')">
                    <h5>一周菜谱</h5>
                    <p>菜单早知道</p>
                    <div class="iconImg">
                        <img src="images/home/oneWeekMenu.svg" />
                    </div>
                </li>
                <li @click="handleClick('/smarcatering/takeawayOrder')">
                    <h5>外卖预定</h5>
                    <p>送餐到位</p>
                    <div class="iconImg">
                        <img src="images/home/takeawayOrder.svg" />
                    </div>
                    </p>
                </li>
                <li @click="handleClick('/smarcatering/roomOrder')">
                    <h5>包间预定</h5>
                    <p>提前预定</p>
                    <div class="iconImg">
                        <img src="images/home/roomOrder.svg" />
                    </div>
                </li>
                <li @click="handleClick('/smarcatering/myOrder')">
                    <h5>我的订单</h5>
                    <p>随时查看</p>
                    <div class="iconImg">
                        <img src="images/home/myOrder.png" />
                    </div>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            // 点击进入应用
            handleClick (path) {
                if (!path) return;
                this.$router.push({ path });
                this.$emit('sendAccesslog', path);
            },
            // 点击更多
            handleClickMore () {
                sessionStorage.removeItem('activeApply');
                this.$router.push({ path: '/mainFrame/apply?menuName=智慧餐饮' });
            }
        }
    }
</script>

<style scoped lang="less">
    .title {
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        line-height: 24px;
        margin: 20px 0 8px 0;
        .left {
            font-size: 18px;
            color: #283f65;
            img {
                width: 24px;
                height: 24px;
                margin-right: 4px;
                vertical-align: top;
            }
        }
        .right {
            font-size: 12px;
            color: #9ba5b8;
        }
    }
    .box {
        padding: 0 12px;
        box-sizing: border-box;
        h5 {
            font-size: 14px;
            line-height: 24px;
            margin-bottom: 4px;
            color: #283f65;
        }
        p {
            font-size: 12px;
            line-height: 16px;
            color: #9ba5b8;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li {
                width: 48.5%;
                height: 68px;
                margin-bottom: 8px;
                border-radius: 8px;
                padding-left: 16px;
                padding-top: 10px;
                box-sizing: border-box;
                position: relative;
            }
        }
        .iconImg {
            position: absolute;
            right: 0;
            bottom: 0;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .restaurant {
        ul {
            li:nth-of-type(1) {
                background: linear-gradient(
                    276.77deg,
                    #ffece8 3.01%,
                    #fffaf9 78.56%
                );
            }
            li:nth-of-type(2) {
                background: linear-gradient(
                    276.94deg,
                    #fff2d9 0.96%,
                    #ffffff 92.24%
                );
            }
            li:nth-of-type(3) {
                background: linear-gradient(
                    98.07deg,
                    #ffffff 4.19%,
                    #e7f0ff 97.47%
                );
            }
            li:nth-of-type(4) {
                background: linear-gradient(97.62deg, #ffffff 4.66%, #f0edff 100%);
            }
            .iconImg {
                width: 67px;
                height: 59px;
            }
        }
        li:nth-of-type(3) {
            margin-bottom: 0;
        }
        li:nth-of-type(4) {
            margin-bottom: 0;
        }
    }
</style>